<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>会员注册表单</title>
  <style>
    
    .Main_Container {
      width: 400px;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    
    h4 {
      color : blue;
      margin-bottom: 20px;
    }
    
    .form-field {
      margin-bottom: 15px;
    }
    
    .form-label {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
    }
    
    .label-text {
      width: 100px;
    }
    
    .InputStyle {
      padding: 5px;
      width: 180px;
      border: 1px solid #ccc;
    }
    
    .required-note {
      color: red;
      margin-left: 5px;
    }
    
    .captcha-box {
      display: flex;
      align-items: center;
    }
    
    #captcha-text {
      background-color: #f0f0f0;
      padding: 5px 10px;
      margin-left: 10px;
      font-weight: bold;
      letter-spacing: 5px;
    }
    
    #refreshCaptcha {
      margin-left: 5px;
      background: none;
      border: none;
      cursor: pointer;
    }
    
    input[type="radio"], input[type="checkbox"] {
      margin-right: 3px;
    }
    
    input[type="radio"] + label, input[type="checkbox"] + label {
      margin-right: 10px;
      font-size: 14px;
    }
    
    select {
      padding: 2px;
      border: 1px solid #ccc;
      font-size: 14px;
    }
    
    input[type="range"] {
      width: 100px;
      margin-right: 10px;
    }
    
    #salaryValue {
      margin-left: 10px;
      min-width: 50px;
    }
    
    input[type="file"] {
      font-size: 14px;
    }
    
    #photoName {
      margin-left: 10px;
      font-size: 12px;
      color: #666;
    }
    
    #photoPreview {
      margin-top: 10px;
      margin-left: 100px;
    }
    
    #previewImg {
      max-width: 200px;
      max-height: 200px;
      display: none;
    }
    
    textarea {
      width: 250px;
      height: 100px;
      border: 1px solid #ccc;
      font-size: 14px;
      font-family: Arial, sans-serif;
    }

    #submitDiv {
      margin-top: 20px;
    }
    
    button {
      padding: 5px 15px;
      margin: 0 5px;
    }

  </style>
</head>
<body>
  <form id="registerForm" action="#" method="post">
    <div class="Main_Container">
      <h4>欢迎注册会员</h4>

      <!-- 手机号码 -->
      <div class="form-field" id="phoneDiv">
        <label for="phone" class="form-label">
          <span class="label-text">手机号码：</span>
          <input
            class="InputStyle"
            type="text"
            id="phone"
            name="phone"
            placeholder="11位手机号"
            required
            pattern="^1\d{10}$"
          />
          <span class="required-note">必填</span>
        </label>
      </div>

      <!-- 创建密码 -->
      <div class="form-field" id="pwdDiv">
        <label for="password" class="form-label">
          <span class="label-text">创建密码：</span>
          <input
            class="InputStyle"
            type="password"
            id="password"
            name="password"
            placeholder="8位密码"
            required
          />
          <span class="required-note">必填</span>
        </label>
      </div>

      <!-- 注册邮箱 -->
      <div class="form-field" id="emailDiv">
        <label for="email" class="form-label">
          <span class="label-text">注册邮箱：</span>
          <input
            class="InputStyle"
            type="email"
            id="email"
            name="email"
            placeholder="例如:wustzz@sina.com"
            required
          />
          <span class="required-note">必填</span>
        </label>
      </div>

      <!-- 验证码 -->
      <div class="form-field" id="verificationDiv">
        <label for="verificationCode" class="form-label">
          <span class="label-text">验证码：</span>
          <input
            class="InputStyle"
            type="text"
            id="verificationCode"
            name="verificationCode"
            placeholder="请输入验证码"
            required
            maxlength="4"
          />
          <div class="captcha-box">
            <div id="captcha-text">UJFg</div>
            <button id="refreshCaptcha" type="button">
              <!-- 修正相对路径，指向第一次大作业文件夹内的imgs目录 -->
              <img
                src="imgs/arrow_03.png"
                alt="刷新验证码"
                style="max-width: 20px; max-height: 20px"
              />
            </button>
          </div>
        </label>
      </div>

      <!-- 性别 -->
      <div class="form-field" id="genderDiv">
        <label class="form-label">
          <span class="label-text">性别：</span>
          <input type="radio" id="male" name="gender" value="男" checked />
          <label for="male">男</label>
          <input type="radio" id="female" name="gender" value="女" />
          <label for="female">女</label>
        </label>
      </div>

      <!-- 生日 -->
      <div class="form-field" id="birthdayDiv">
        <label for="birthday" class="form-label">
          <span class="label-text">生日：</span>
          <input
            class="InputStyle"
            type="text"
            id="birthday"
            name="birthday"
            placeholder="年/月/日"
          />
        </label>
      </div>

      <!-- 年龄 -->
      <div class="form-field" id="ageDiv">
        <label for="age" class="form-label">
          <span class="label-text">年龄：</span>
          <input
            class="InputStyle"
            type="text"
            id="age"
            name="age"
          />
        </label>
      </div>

      <!-- 籍贯 -->
      <div class="form-field" id="hometownDiv">
        <label class="form-label">
          <span class="label-text">籍贯：</span>
          <select id="province" name="province" style="margin-right: 10px">
            <option value="湖北省">湖北省</option>
            <option value="北京市">北京市</option>
            <option value="上海市">上海市</option>
          </select>
          <select id="city" name="city">
            <option value="武汉">武汉</option>
            <option value="宜昌">宜昌</option>
            <option value="襄阳">襄阳</option>
          </select>
        </label>
      </div>

      <!-- 个人学历 -->
      <div class="form-field" id="educationDiv">
        <label class="form-label">
          <span class="label-text">个人学历：</span>
          <select id="education" name="education">
            <option value="本科">本科</option>
            <option value="大专">大专</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
            <option value="高中">高中</option>
          </select>
        </label>
      </div>

      <!-- 月薪 -->
      <div class="form-field" id="salaryDiv">
        <label class="form-label">
          <span class="label-text">月薪：</span>
          <input
            type="range"
            id="salary"
            name="salary"
            min="1000"
            max="10000"
            step="100"
            value="5000"
          />
          <span id="salaryValue">5000</span>
        </label>
      </div>

      <!-- 个人爱好 -->
      <div class="form-field" id="hobbiesDiv">
        <label class="form-label">
          <span class="label-text">个人爱好：</span>
          <input type="checkbox" id="hobby1" name="hobbies" value="唱歌" />
          <label for="hobby1">唱歌</label>
          <input type="checkbox" id="hobby2" name="hobbies" value="跑步" />
          <label for="hobby2">跑步</label>
          <input type="checkbox" id="hobby3" name="hobbies" value="游泳" />
          <label for="hobby3">游泳</label>
        </label>
      </div>

      <!-- 个人照片 -->
      <div class="form-field" id="photoDiv">
        <label for="photo" class="form-label">
          <span class="label-text">个人照片：</span>
          <input type="file" id="photo" name="photo" accept="image/*"/>
          <span id="photoName">未选择任何文件</span>
        </label>
        <!-- 照片预览区域 -->
        <div id="photoPreview">
          <img id="previewImg" src="" alt="照片预览"/>
        </div>
      </div>

      <!-- 个人简介 -->
      <div class="form-field" id="introductionDiv">
        <label for="introduction" class="form-label">
          <span class="label-text">个人简介：</span>
          <textarea
            id="introduction"
            name="introduction"
            placeholder="请输入个人简介"
          ></textarea>
        </label>
      </div>

      <!-- 提交和重置按钮 -->
      <div class="form-field" id="submitDiv">
        <button type="submit" id="submitBtn">提交</button>
        <button type="reset" id="resetBtn">重置</button>
      </div>
    </div>
  </form>

  <script>

    const salaryRange = document.getElementById("salary");
    const salaryValue = document.getElementById("salaryValue");
    const photoInput = document.getElementById("photo");
    const photoName = document.getElementById("photoName");
    const previewImg = document.getElementById("previewImg");
    const captchaText = document.getElementById("captcha-text");
    const refreshCaptcha = document.getElementById("refreshCaptcha");

    // 更新月薪显示
    salaryRange.addEventListener("input", function () {
      salaryValue.textContent = this.value;
    });

    // 更新选择的文件名和照片预览
    photoInput.addEventListener("change", function () {
      if (this.files.length > 0) {
        photoName.textContent = this.files[0].name;
        
        // 显示照片预览
        const file = this.files[0];
        const reader = new FileReader();
        
        reader.onload = function(e) {
          previewImg.src = e.target.result;
          previewImg.style.display = "block";
        }
        
        reader.readAsDataURL(file);
      } else {
        photoName.textContent = "未选择任何文件";
        previewImg.src = "";
        previewImg.style.display = "none";
      }
    });

    // 生成随机验证码
    function generateCaptcha() {
      const chars = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789";
      let captcha = "";
      for (let i = 0; i < 4; i++) {
        captcha += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      captchaText.textContent = captcha;
    }

    // 刷新验证码
    refreshCaptcha.addEventListener("click", function () {
      generateCaptcha();
    });

    generateCaptcha();
  </script>
</body>
</html>
